<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="Build/Cesium/Cesium2.js"></script>
		<script src="js/csm/WMTSImageryProvider.js"></script>
		<script src="js/csm/wtms.js"></script>
		<link rel="stylesheet" type="text/css" href="css/uiBase.css" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/sweetalert.css" />
		<link rel="stylesheet" type="text/css" href="css/yingjixiangying.css" />
		<script src="js/mui.min.js"></script>
		<style type="text/css">
			/*  cesium   核心样式文件*/
			
			@import url("Build/Cesium/Widgets/widgets.css");
			#cesiumContainer {
				width: 100%;
				height: 100%;
			}
			
			@media (min-device-width: 375px)and(max-device-width: 667px)and(-webkit-min-device-pixel-ratio: 2) {
				/*iphone6*/
				#cesiumContainer {
					width: 375px;
					height: 667px;
				}
			}
			
			@media (min-device-width: 414px)and(max-device-width: 736px)and(-webkit-min-device-pixel-ratio: 3) {
				/*iphone6plus*/
				#cesiumContainer {
					width: 414px;
					height: 736px;
				}
			}
		</style>
	</head>
	<body>
		<!--侧滑菜单容器-->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--菜单部分-->
			<!--左侧滑栏-->
			<aside id="offCanvasSide02" class="mui-off-canvas-right" style="background: white;">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper zuocehua">
					<div class="mui-scroll">
						<header class="mui-bar mui-bar-nav fanhui02">
							<a class="mui-icon mui-icon-left-nav mui-pull-left" id="tuichu02"></a>
							<h1 class="mui-title">图层列表</h1>
						</header>
						<div style="margin-top:86px;" class="jindutiao" id="tucenglist">
							<div class="mui-input-row mui-input-range tucenginfo">
								<header  >
									<span><img src="images/Artboard2Copy.png" class="toggle"
                                        ></span>
									<span class="mui-icon mui-icon-bars mui-pull-right"></span>
									<label>市界</label>
									<input type="range" min="0" max="100" id="rangeCity" class="range1" value="100">
								</header>
							</div>
							<div class="mui-input-row mui-input-range tucenginfo">
								<header  >
									<span><img src="images/Artboard2Copy.png" class="toggle"
                                        ></span>
									<span class="mui-icon mui-icon-bars mui-pull-right"></span>
									<label>省界</label>
									<input type="range" min="0" max="100" id="rangePro" class="range1" value="100">
								</header>
							</div>
							<div class="mui-input-row mui-input-range tucenginfo">
								<header  >
									<span><img src="images/Artboard2Copy.png" class="toggle"
                                        ></span>
									<span class="mui-icon mui-icon-bars mui-pull-right"></span>
									<label> 国界</label>
									<input type="range" min="0" max="100" id="rangeCountry" class="range1" value="100">
								</header>
							</div>
							<div class="mui-input-row mui-input-range tucenginfo">
								<header  >
									<span><img src="images/Artboard2Copy.png" class="toggle"
                                        ></span>
									<span class="mui-icon mui-icon-bars mui-pull-right"></span>
									<label> 全球国界</label>
									<input type="range" min="0" max="100" id="rangeAllCountry" class="range1" value="100">
								</header>
							</div>
						</div>
					</div>
				</div>
			</aside>
			<!--右侧滑栏-->
			<aside id="offCanvasSide" class="mui-off-canvas-left" style="background: white;width: 100%;">
				<div id="offCanvasSideScroll1">
					<div>
						<header class="mui-bar mui-bar-nav fanhui">
							<a class=" mui-icon mui-icon-left-nav mui-pull-left" id="tuichu"></a>
							<h1 class="mui-title" style="color: black;"></h1>
						</header>
						<div class="mui-content xuanzei">
							<div class="mui-row" >
								<div class="mui-col-sm-3 mui-col-xs-3">
									<li>
										<select name="cd-dropdown" class="cd-select" id="cd-dropdown">
											<option value="地震" class="icon-monkey">地震▼</option>
										</select>
									</li>
								</div>
								<div class="mui-col-sm-9 mui-col-xs-9">
									<div class="mui-table-view-cell" style="height: 60px;">
										<form action="/example/html5/demo_form.asp" method="get" style="margin-top: 10px;">
											时间 <input type="date" user_month id="asidedate" />
										</form>
										<span class="mui-icon mui-icon-search mui-pull-right" id="filterclick"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="mui-scroll-wrapper" style="margin-top: 110px;">
							<div class="mui-scroll " id="pullrefresh">
								<!--这里放置真实显示的DOM内容-->
								<div class="dizhenxinxi" style="clear: both;">
									<ul class="mui-table-view" id="response">

									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</aside>
			<div class="mui-inner-wrap">
				<img src="images/northSea.png" id="map"/>
				<div id="offCanvasContentScroll" class="mui-content">
					<header class="mui-bar mui-bar-nav dz_heard"   id="headerBox">
						<a class="mui-pull-right" id="offCanvasBtn02" href="#offCanvasSide">
							<img src="images/menu@1.5x.png"/>
						</a>
						<a class="mui-pull-left" id="dizhen_home">
							<img src="images/home@1.5x.png"/>
						</a>
						<span  >
							<img src="images/search@1.5x.png"/>
							<input id="searchInp" type="text"/>
							<span id="claerVal" class="disnone"></span>
						</span>
					</header>
					<div class="mui-fullscreen">
						<div id="cesiumContainer"></div>
						<ul class="kongzhiliebiao">
							<li>
								<a id="offCanvasBtn" href="#offCanvasSide02"><img src="images/a.png" class="img-responsive"></a>
							</li>
							<li id="btnTDS"><span></span></li>
							<li id="liebiaotu"><img src="images/c.png" class="img-responsive"></li>
							<li id="re"><img src="images/d.png" class="img-responsive"></li>
						</ul>
						<div id="img_yj">
							<div id="plot">
								如长时间未显示数据 <br /> 请检查网络是否连接正常后
								<br /> 再点此刷新
							</div>
						</div>
					</div>
					<div class="mui-scroll"></div>
				</div>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/sweetalert.min.js"></script>
		<script src="plugin/public.js"></script>
		<script src="core/n2.js"></script>
		<script src="./core/scopedef.js"></script>
		<script src="plugin/main.js"></script>
		<script src="js/laydate/laydate.js"></script>
		<script type="text/javascript">
			var mui_title = document.querySelector(".mui-title");
			var searchInp =document.getElementById('searchInp');
			//获取类型 应急响应或地震
			if(location.search.indexOf("?") != -1) {
				var leixing = location.search.substring(1, 3);
			};
			//加载应急响应的球界面及功能
			if(leixing == "dz") {
				//加载地震的球界面及功能
				searchInp.placeholder = "地震";
				new n2.main().dizheng();
			} else if(leixing == "yy") {
				//加载应急响应的球界面及功能
				searchInp.placeholder = "应急响应";
				new n2.main().xiangying();
			}
			//上拉下拉刷新
			mui.init({
				swipeBack: false,
				gestureConfig: { //管理屏幕交互
					tap: true, //默认为true
					doubletap: true, //默认为false
					longtap: true, //默认为false
					swipe: true, //默认为true
					drag: true //默认为true
				}
			});
			mui.plusReady(function() {
				//保证屏幕常亮
				plus.device.setWakelock(true);
				//前台切后台事件 只要切到后台 就回到首页
				document.addEventListener("pause", function() {
					// 获取所有Webview窗口 
					var wvs = plus.webview.all();
					var index_id = plus.webview.getLaunchWebview().id;
					for(var i = 0; i < wvs.length; i++) {
						console.log('webview' + i + ': ' + wvs[i].getURL());
						console.log('webview' + i + ': ' + wvs[i].id);
						if(wvs[i].id != index_id) {
							//返回主页
							plus.webview.close(wvs[i]);
						}
					}
					plus.webview.getLaunchWebview().show();
				}, false);
				var wvs = plus.webview.all();
				for(var i = 0; i < wvs.length; i++) {
					if(wvs[i].id == 'yingjixiangyingzhuanti.html') {
						plus.webview.hide(wvs[i]);
						plus.webview.close(wvs[i]);
					}
					if(wvs[i].id == 'dizhenzaihaizhuanti.html') {
						plus.webview.hide(wvs[i]);
						plus.webview.close(wvs[i]);
					}
					console.log('webview' + i + ': ' + wvs[i].getURL());
					console.log('webview' + i + ': ' + wvs[i].id);
				}
				//调到index页面
				document.getElementById("dizhen_home").addEventListener('tap', function(event) {
					// 获取所有Webview窗口
					var wvs = plus.webview.all();
					var index_id = plus.webview.getLaunchWebview().id;
					for(var i = 0; i < wvs.length; i++) {
						console.log('webview' + i + ': ' + wvs[i].getURL());
						console.log('webview' + i + ': ' + wvs[i].id);
						if(wvs[i].id != index_id) {
							plus.webview.close(wvs[i]);
						}
					}
					plus.webview.getLaunchWebview().show();
				}, false);
			});
			//退出选择侧滑
			mui(".fanhui").on("tap", "#tuichu", function() {
				mui('.mui-off-canvas-wrap').offCanvas('close');
			});
			mui(".fanhui02").on("tap", "#tuichu02", function() {
				mui('.mui-off-canvas-wrap').offCanvas('close');
			});
			//点击显示图片
			mui('.kongzhiliebiao').on("tap", "#liebiaotu", function() {
				$('#img_yj').toggle();
			});
			mui('.mui-scroll-wrapper').scroll({
				scrollY: true, //是否竖向滚动
				scrollX: false, //是否横向滚动
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				indicators: true, //是否显示滚动条
				deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
				bounce: true //是否启用回弹
			});
			var csm = document.querySelector('#cesiumContainer');
			csm.addEventListener('touchstart', function(event) {
				startX = event.touches[0].clientX;
				var width = csm.clientWidth;
				var viewer = n2.viewer;
				var scene = viewer.scene;
				//侧边滑动出现侧边栏的范围
				var max = 50;
				var offCanvasWrapper = mui('#offCanvasWrapper');
				//主界面容器
				var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
				offCanvasInner.addEventListener('drag', function(event) {
					if(startX < max) {
						//决定球是否可控制转动      false则不可控制，不能转动       true可以转动，可以控制
						viewer.scene._screenSpaceCameraController.enableRotate = false;
					} else if(startX < width && startX > (width - max)) {
						//决定球是否可控制转动      false则不可控制，不能转动       true可以转动，可以控制
						viewer.scene._screenSpaceCameraController.enableRotate = false;
					} else {
						viewer.scene._screenSpaceCameraController.enableRotate = true;
						event.stopPropagation();
					}
				});
			})
			//刷新页面
			//没有收到数据，可以刷新页面
			var plot = document.querySelector("#plot");
			plot.addEventListener("tap", function() {
				window.location.reload(true);
			})
		</script>
	</body>

</html>